<template>
  <div class="realbox">
    <div v-if="state.dealList.length > 0">
      <div
        class="realtime-data color_42 flex js-sp align-center family-d"
        v-for="(item, index) in state.dealList"
        :key="index"
      >
        <div class="flex js-sp align-center flex-grow-1">
          <div :class="item.direction === 1 ? 'text-green' : 'text-red'">
            {{
              $currency(
                decimalDigitsInputFilter(item.price, getTrading.price_accuracy)
              )
            }}
          </div>
          <div class="center text-right">
            {{
              $currency(
                decimalDigitsInputFilter(
                  item.number,
                  getTrading.number_accuracy
                )
              )
            }}
          </div>
          <div class="w_55 text-right">{{ state.time }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted, reactive, watch, nextTick, computed } from "vue";
import { formatDate } from "@/utils/times.js";
import { decimalDigitsInputFilter } from "@/utils/common";
import { useStore } from "vuex";

export default {
  name: "Realtime",
  props: {
    deallist: Array,
    time: Number,
  },
  setup(props) {
    const state = reactive({
      dealList: [],
      time: "",
    });
    const $store = useStore();
    watch(props, (val) => {
      state.dealList = state.dealList.concat(state.dealList, val.deallist);
      if (state.dealList.length > 15) {
        state.dealList.splice(0, state.dealList.length - 15);
      }
      if (props.time) {
        nextTick(() => {
          state.time = formatDate(props.time, "HH:mm:ss");
        });
      }
    });
    const getTrading = computed(() => {
      return $store.state.exchange.deal_data;
    });
    onMounted(() => {});

    return {
      state,
      getTrading,
      decimalDigitsInputFilter,
    };
  },
};
</script>

<style scoped lang="less">
.realtime-data {
  height: 21px;
}
.realbox {
  overflow-y: scroll;
  padding: 10px;
  // height: 415px;
}
.w_55 {
  width: 55px;
}
</style>
